import Vue from "vue";

import "normalize.css/normalize.css"; // A modern alternative to CSS resets

import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
// import locale from 'element-ui/lib/locale/lang/en' // lang i18n
import locale from "element-ui/lib/locale/lang/zh-CN"; // lang i18n

import "@/styles/index.scss"; // global css

import App from "./App";
import store from "./store";
import router from "./router";
import "@/icons"; // icon
import "@/permission"; // permission control
// v-has="['.gateway:add']"
// 全局注册组件
import components from "./utils/components";
Vue.use(components);

import { vm } from "./utils/bus";
Vue.prototype.$bus = vm;
// 全局注册过滤
import filter from "./utils/filter";
Vue.use(filter);
// import astrict from "./utils/astrict"
// Vue.use(astrict);
// 全局注册公共ip
const baseUrl = require("@/utils/baseUrl.js");
const serverSrc = baseUrl.serverSrc;
Vue.prototype.$wsUrl = serverSrc;

//将echarts存到Vue原型中
import * as echarts from "echarts";
Vue.prototype.$echarts = echarts;

import JsonViewer from "vue-json-viewer";
Vue.use(JsonViewer);
import VueForm from '@lljj/vue-json-schema-form';
Vue.component('VueForm', VueForm);
Vue.directive("dialogDrag", {
  bind(el, binding, vnode, oldVnode) {
    const dialogHeaderEl = el.querySelector(".el-dialog__header");
    const dragDom = el.querySelector(".el-dialog");
    dialogHeaderEl.style.cursor = "move";
    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null);
    dialogHeaderEl.onmousedown = e => {
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - dialogHeaderEl.offsetLeft;
      const disY = e.clientY - dialogHeaderEl.offsetTop;
      // 获取到的值带px 正则匹配替换
      let styL, styT;
      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
      if (sty.left.includes("%")) {
        styL =
          +document.body.clientWidth * (+sty.left.replace(/\%/g, "") / 100);
        styT =
          +document.body.clientHeight * (+sty.top.replace(/\%/g, "") / 100);
      } else {
        styL = +sty.left.replace(/\px/g, "");
        styT = +sty.top.replace(/\px/g, "");
      }
      document.onmousemove = function (e) {
        // 通过事件委托，计算移动的距离
        const l = e.clientX - disX;
        const t = e.clientY - disY;
        // 移动当前元素
        dragDom.style.left = `${l + styL}px`;
        dragDom.style.top = `${t + styT}px`;
        //将此时的位置传出去
        //binding.value({x:e.pageX,y:e.pageY})
      };
      document.onmouseup = function (e) {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  }
});

/** 权限指令,对按钮权限的控制 **/
Vue.directive("has", {
  bind: function (el, binding) {
    // console.log(Vue.prototype.$_has(binding.value), 'admin');
    if (!Vue.prototype.$_has(binding.value)) {
      el.setAttribute("class", "btnHidden");
    }
  }
});
// 权限检查方法（且把该方法添加到vue原型中）
Vue.prototype.$_has = function (value) {
  let isExist = false;
  // 从浏览器缓存中获取权限数组（该数组在登入成功后拉取用户的权限信息时保存在浏览器的缓存中）
  var buttonpermsList = JSON.parse(localStorage.getItem("permission_btnList"));
  // console.log(buttonpermsList, 'buttonpermsList');
  if (buttonpermsList === undefined || buttonpermsList == null) {
    return false;
  }
  isExist = buttonpermsList.some(item => {
    return value.indexOf(item.action) >= 0;
  });
  return isExist;
};

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */
if (process.env.NODE_ENV === "production") {
  const { mockXHR } = require("../mock");
  mockXHR();
}

// set ElementUI lang to EN
Vue.use(ElementUI, { locale });
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)

Vue.config.productionTip = false;

new Vue({
  el: "#app",
  router,
  store,
  render: h => h(App)
});
